<template>
  <div class="pl-48 p-8 flex flex-col items-center overflow-y-scroll gap-4">
    <div v-for="(product,i) in products" :key="i" class="w-1/2 cursor-pointer">
      <img v-if="product.closed" :src="product.closeImage" @click="handleExpand(i)">
      <img v-else :src="product.showImage" @click="handleExpand(i)">
      <div v-if="!product.closed" class="mt-4">
        <div v-for="txt in product.content" :key="txt">
          <p v-if="isNaN(parseInt(txt[0]))">
            {{ txt }}
          </p>
          <p v-else :style="{ color: product.color }">
            {{ txt }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const products = ref([
  {
    closed: true,
    showImage: '/obj-jin1.png',
    closeImage: '/obj-jin0.png',
    color: '#f8a6a6',
    content: [
      '卫生巾也有不同种类',
      '1.纯棉卫生巾',
      '柔软舒适，不易过敏但回弹性略差，适合量少人群',
      '2.网面卫生巾',
      '吸收快，渗透性好，适合量多人群。但亲肤性较差，容易过敏',
      '3.绵柔卫生巾',
      '绵柔≠纯棉。是一种化纤原料高温融化压制而成，像棉花一样柔软。兼具透气度和干爽度。',
      '4.液体卫生巾',
      '外观、使用方法与传统卫生巾并无区别。采用源自液体的高密度吸收材料，吸水性极强，瞬间千爽。',
      '5.发热卫生巾',
      '号称自发热，可缓解不适。使用时注意不要贴反。使用感受因人而异，有人表示位置刚好温暖舒适，也有许多人表示位置尴尬，容易滋生细菌，散发异味。'
    ]
  },
  {
    closed: true,
    showImage: '/obj-tiao1.png',
    closeImage: '/obj-tiao0.png',
    color: '#8eb7f5',
    content: [
      '清洁、方便携带，也存在危险因素',
      '·材质:主要以棉和人造纤维或者混合材料为主。',
      '·大小:分为不同型号，直径基本上是在1到2厘米之间。',
      '·造型:在其尾部有一根棉线，用于取出棉条。',
      '·常见疑问:',
      '1.处女可以用吗?',
      '处女膜并不是完全封闭的状态,即使是选择最人号的棉条，也不会影响到处女腺的元性。',
      '2.会引起什么休克吗?',
      '基于棉条本身的吸力很大，除了可以吸收血液以外，还可以吸收阴道里的分泌物。因此长时间的放置会降低阴道内的自我防护机制，阴道里广的一些细菌就有可能珍机进入到血液当中，导致中毒性休克。因此最长8小时更换一次。',
      '3.什么情况不能用?',
      '月经还没来或者刚刚来的时候或本身有妇科炎症不建议使用。',
      '·使用:建议网上查找详细图文教程。'
    ]
  },
  {
    closed: true,
    showImage: '/obj-bei1.png',
    closeImage: '/obj-bei0.png',
    color: '#f5c392',
    content: [
      '容量大，可重复使用',
      '·材质:基本都是医用硅胶制成，软且有弹性',
      '·大小:有不同的型号。考量的因素主要是阴道的宽窄，以及月经量的多少。',
      '·造型:基本上呈钟型，后面带个小柄。',
      '·常见疑问:',
      '1.没有性经验的女性能不能用月经杯?',
      '月经杯比卫生棉条大很多，一进一出，还是有挺大几率把阴道瓣（俗称处女膜）给撑开甚至撑破的。',
      '2.用了月经杯之后，阴道会不会变松?',
      '阴道本身具有良好的延展性和弹性，其性能远在月经杯之上。',
      '3.用月经杯会感觉疼吗?',
      '如果位置正确，基本上没有什么感觉。不过，也不排除有人过分紧张令月经杯无法置入。',
      '·使用:建议网上查找详细图文教程。',
      '·注意事项:建议过12小时就取出。需要注意清洗，需要及时倾倒，一些妇科炎症患者不建议使用月经杯。'
    ]
  }
])

function handleExpand (i) {
  products.value[i].closed = !products.value[i].closed
}
</script>
